<template>
  <div>
    <Row ref="mapviewRef">
      <Col :span="12">
        <div>
          <Affix :offsetTop="2" :target="getAffixContainer">
            <HouseMngMap :showMapOnly="true" :showMapPopupButtons="false" ref="houseMngRef" />
          </Affix>
        </div>
      </Col>
      <Col :span="12">
        <PageWrapper :title="'房屋编号333-' + houseName">
          <Description @register="register" class="mt-4" :labelStyle="{ width: '15em' }" />
        </PageWrapper>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, reactive, toRefs } from 'vue';
  import { Description, DescItem, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { useRoute } from 'vue-router';
  import { getCommercialDetailColumns, getResidentDetailColumns } from './tableData';
  import { detailCommercialApi, detailResidentApi } from '/@/api/demo/integrationtable';
  import { houseApi } from '/@/api/demo/table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import HouseMngMap from '/@/views/houseMng/HouseMap.vue';
  import { Col, Row, Affix } from 'ant-design-vue';

  const { createMessage } = useMessage();
  const { info, success, warning, error } = createMessage;
  import { propTypes } from '/@/utils/propTypes';

  export default defineComponent({
    components: { Description, PageWrapper, HouseMngMap, Col, Row, Affix },
    props: {
      pid: propTypes.string,
      typ: propTypes.number,
      hid: propTypes.string,
    },
    setup(props) {
      const route = useRoute();
      const houseInfo = ref<Recordable>({});
      const detailInfo = ref<Recordable>({});
      const oid = route.params?.id ?? props.pid;
      const typ = route.query?.typ ?? props.typ;
      const hid = route.query?.hid ?? props.hid;
      const typCommercial = 1 == typ;
      const typMode = computed(() => (typCommercial ? '商业场所' : '居民场所'));
      const houseName = computed(() => houseInfo.value['fwbh']);
      const houseMngRef = ref();

      const mapviewRef = ref();

      function getAffixContainer() {
        return document.getElementById('policePlaceDetailDrawer');
      }

      houseApi({ id: hid })
        .then((d) => {
          houseInfo.value = d;
        })
        .catch((err) => {
          error(err.message || '获取房屋信息失败');
        });

      if (typCommercial) {
        detailCommercialApi({ hid, pid: oid })
          .then((d) => {
            detailInfo.value = d;
          })
          .catch((err) => {
            error(err.message || '获取场所信息失败');
          });
      } else {
        detailResidentApi({ hid, pid: oid })
          .then((d) => {
            detailInfo.value = d;
          })
          .catch((err) => {
            error(err.message || '获取场所信息失败');
          });
      }

      const [register] = useDescription({
        title: typMode,
        data: detailInfo,
        schema: typCommercial ? getCommercialDetailColumns() : getResidentDetailColumns(),
        column: 1,
        collapseOptions: { canExpand: true, helpMessage: oid },
      });

      function locMap() {
        houseMngRef.value.locMap(hid);
      }

      return {
        register,
        oid,
        typMode,
        houseName,
        houseMngRef,
        locMap,
        mapviewRef,
        getAffixContainer,
      };
    },
  });
</script>
